<style lang="less">
  .standard-price-add{
    .el-select{
      width: 100%;
    }
    .el-cascader{
      width: 90%;
    }
  }
</style>

<template>
  <el-dialog title="新增运价文件" :visible.sync="dialogVisible" size="tiny" class="standard-price-add">
    <el-form label-width="100px" ref="form" :model="form">
      <el-form-item label="运价名称"
                    :rules="{required: true, message: '请输入运价名称', trigger: 'blur'}"
                    prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="运价类型"
                    :rules="{required: true, type: 'number', message: '请选择运价类型', trigger: 'change'}"
                    prop="type">
        <el-select v-model.number="form.type" placeholder="请选择运价类型">
          <el-option v-for="item in $store.getters.TARIFF_CLASSIFICATION"
                     :label="item.cnDictValname"
                     :key="item.dictVal"
                     :value="item.dictVal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布渠道"
                    :rules="{required: true, type: 'string', message: '请选择发布渠道', trigger: 'change'}"
                    prop="stowageId">
        <el-select v-model="form.stowageId"
                   placeholder="请选择发布渠道">
          <el-option v-for="item in $store.getters.STOWAGES"
                     :label="item.name"
                     :key="item.id"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-for="(domain, index) in form.destinationOrganizationIds" :key="index" label="目的地组织"
                    :rules="{required: true, type: 'array', message: '请选择目的地组织', trigger: 'change'}"
                    :prop="'destinationOrganizationIds.' + index + '.value'">
        <el-cascader
          placeholder="请选择目的地组织"
          :options="$store.state.initOrganizations"
          :props="{label: 'name',value: 'id'}"
          change-on-select
          v-model="domain.value"></el-cascader>
        <el-button type="primary" icon="el-icon-minus" v-if="index !== form.destinationOrganizationIds.length-1" @click="removeDestinationOrganization(index)"></el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="index === form.destinationOrganizationIds.length-1" @click="addDestinationOrganization"></el-button>
      </el-form-item>
      <el-form-item label=" 备 注 ">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="createform" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'StandardPriceAdd',
  componentName: 'StandardPriceAdd',
  data () {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        id: null,
        name: null,
        type: null,
        stowageId: null,
        description: null,
        destinationOrganizationIds: [
          {value: []}
        ]
      }
    };
  },
  methods: {
    reset: function () {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      for (let p in this.form) {
        if (this.form[p] instanceof Array) {
          this.form[p] = [];
        } else {
          this.form[p] = null;
        }
      }
      this.form.destinationOrganizationIds = [{value: []}];
    },
    show (o) {
      this.reset();
      if (o) {
        this.form.id = o.id;
        this.form.name = o.name;
        this.form.type = o.type;
        this.form.stowageId = o.stowageId;
        this.form.description = o.description;
        this.form.destinationOrganizationIds = o.organizationIds.split(';').map(o => {
          return {value: o.split(',')};
        });
      }
      this.dialogVisible = true;
      this.loading = false;
    },
    hide () {
      this.loading = false;
      this.dialogVisible = false;
    },
    removeDestinationOrganization (index) {
      this.form.destinationOrganizationIds.splice(index, 1);
    },
    addDestinationOrganization () {
      this.form.destinationOrganizationIds.push({value: []});
    },
    createform () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let o = Object.assign({}, this.form);
          o.organizationIds = o.destinationOrganizationIds.map(o => {
            return o.value.join(',');
          }).join(';');
          this.loading = true;
          this.$emit('comfirmSuccess', o);
        }
      });
    }
  },
  mounted () {
    this.$store.commit('initStowages');
    this.$store.commit('initDict');
    this.$store.commit('initOrganizations');
  }
};
</script>
